<template>
  <div class="userIndex">
    <div class="banner">
      <template v-if="hasLogin">
        <div class="banner-top">
          <div class="top-two">
            
              <div class="left">
                <img :src="headImg" :onerror="noImg" />
              </div>
           
            <div class="con">
              <p class="con-name">{{userInfo.name}}</p>
              <p class="con-introduce clamp">{{userInfo.introduce}}</p>
            </div>
          </div>
          <router-link to="/user/information">
            <span class="iconfont right" style="color:#fff">&#xe606;</span>
          </router-link>          
        </div>
        <div class="banner-bot">
          <div class="bot-cn1">
            <p>{{userInfo.zanNum}}</p>
            <p class="bot-cn1-two">获赞</p>
          </div>
          <div class="line-h"></div>
          <div class="bot-cn2">
            <p>{{userInfo.fansNum}}</p>
            <p class="bot-cn1-two">粉丝</p>
          </div>
          <div class="line-h"></div>
          <div class="bot-cn3">
            <p>{{userInfo.guanzhuNum}}</p>
            <p class="bot-cn1-two">关注</p>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="banner-top2">
            <div class="left">
              <img :src="headImg" :onerror="noImg" />
            </div>
            <router-link to="/public/login">
              <button class="banner-login">立即登录</button>
            </router-link>
        </div>
        <div class="banner-bot">
          <div class="bot-cn1">
            <p>暂无数据</p>
            <p class="bot-cn1-two">获赞</p>
          </div>
          <div class="line-h"></div>
          <div class="bot-cn2">
            <p>暂无数据</p>
            <p class="bot-cn1-two">粉丝</p>
          </div>
          <div class="line-h"></div>
          <div class="bot-cn3">
            <p>暂无数据</p>
            <p class="bot-cn1-two">关注</p>
          </div>
        </div>
      </template>
    </div>
    <!-- 分类 -->
    <div class="sort">
        <router-link to="/myPost">
          <div class="sort-cn">
             <img src="/static/img/icon_tz.png" :onerror="noImg" />
          </div>
        </router-link>
        <router-link to="/comment">
          <div class="sort-cn">
             <img src="/static/img/icon_pl.png" :onerror="noImg" />
          </div>
        </router-link>
        <router-link to="/collection">
          <div class="sort-cn">
             <img src="/static/img/icon_sc.png" :onerror="noImg" />
          </div>
        </router-link>
         <router-link to="/history">
          <div class="sort-cn">
             <img src="/static/img/icon_ls.png" :onerror="noImg" />
          </div>
         </router-link>
    </div>
    <!-- 今日赛事 -->
    <div class="line-w"></div>
    <div class="today-img" v-if="hasLogin">
      <a :href=adUrl>
        <img :src=adImg :onerror="noImg2" style="border-radius: .12rem;"/>
      </a>
    </div>
    <div class="sort2" v-if="hasLogin">
        <router-link to='/user/myCircle'>
          <div class="sort2-cn1">
            <div class="sort-cn1-left">
                <div class="cn1-img"><img src="/static/img/icon_quanzi.png"/></div>
                 <p class="cn1-text">我的圈子</p>
            </div>
           <span class="iconfont right2">&#xe606;</span>
        </div>
        </router-link>
        
        <div class="line-hg"></div>
        <router-link to='/user/messages'>
          <div class="sort2-cn1">
              <div class="sort-cn1-left">
                  <div class="cn1-img"><img src="/static/img/icon_news.png"/></div>
                  <p class="cn1-text">系统消息</p>
              </div>
            <span class="iconfont right2">&#xe606;</span>
          </div>
        </router-link>
        <div class="line-hg"></div>
        <router-link to='/user/feedback'>
          <div class="sort2-cn1">
              <div class="sort-cn1-left">
                  <div class="cn1-img"><img src="/static/img/icon_fankui.png"/></div>
                  <p class="cn1-text">意见反馈</p>
              </div>
            <span class="iconfont right2">&#xe606;</span>
          </div>
        </router-link>
        <div class="line-hg"></div>
        <router-link to="/user/myset">
          <div class="sort2-cn1">
            <div class="sort-cn1-left">
                <div class="cn1-img"><img src="/static/img/icon_shezhi.png"/></div>
                 <p class="cn1-text">设置</p>
            </div>
           <span class="iconfont right2">&#xe606;</span>
        </div>
        </router-link>
        
       <div class="ling-bj"></div>
     
    </div>
    <home-footer :hover="currentItem"></home-footer>
  </div>
</template>
<script>
import axios from "axios";
import HomeFooter from '../../components/Footer'
import { Toast, Indicator,Cell} from "mint-ui";
export default {
  name: "user",
  components:{
     mtCell:Cell,
     HomeFooter
  },
  data: function() {
    return {
      currentItem:'4',
      hasLogin: false,
      adImg:'/static/img/today_img.png',
      noImg2:'this.src="/static/img/today_img.png"',
      noImg: 'this.src="/static/img/soccerbig.png"',
      adUrl:'',
      userInfo: {
        name: "刘希依9527",
        introduce: "自我介绍，只有一句的自我介绍",
        zanNum: 0,
        fansNum: 0,
        guanzhuNum: 0,
        
      },
      headImg: ""
    };
  },

  methods: {
    // 用户信息
    getHomeInfo:function(id){
      let userI=sessionStorage.getItem("userInfo");
      let userInfo=JSON.parse(userI)
      if(userInfo){
        this.hasLogin=true;
        this.userInfo.name=userInfo.userInfo.userName
        this.userInfo.introduce=userInfo.userInfo.summary;
        this.userInfo.zanNum=userInfo.userInfo.likes;
        this.userInfo.fansNum=userInfo.userInfo.fans;
        this.userInfo.guanzhuNum=userInfo.userInfo.focus;     
        if(userInfo.ad.image==''||userInfo.ad.image==undefined){
          this.adImg='/static/img/today_img.png';
        }else{
          this.adImg=userInfo.ad.image
        }
        if(userInfo.ad.url==''||userInfo.ad.url==undefined){
          this.adUrl="";
        }else{
          this.adUrl="http://"+userInfo.ad.url;
        }
        this.headImg=userInfo.userInfo.userHead;
       if(this.headImg==''){
         this.headImg='/static/img/soccerbig.png'
       }
      }
      
    },
    btnLogin(){
      this.hasLogin=!this.hasLogin;
    }
  },
  created() {
    this.getHomeInfo()
  },
  mounted() {

  }
};
</script>
<style lang="less" scoped>
@import "swiper/dist/css/swiper.min.css";
@import "~styles/varibles.less";
@import url('~styles/common.less');
</style>
